<template>
	<view class="page">
		<view class="con-box">
			<view class="it title">
				圈子图
			</view>
			<view class="it img-box">
				<image :class="img.classCon" @tap="chooseImg(img.id)" v-for="(img, ind) in imgs" :key="ind" :src="img.value" mode=""></image>
			</view>
			<view class="it item title">
				<view class="left">圈名</view>
				<view class="add-box">
					<input class="inp" v-model="circle.title" type="text" maxlength="20" value="" placeholder="例如 徐汇羽毛球道友群"/><icon v-if="sureTitle" type="warn"></icon>
				</view>
			</view>
			<view class="it item title">
				<view class="left">简介</view>
				<view class="add-box">
					<input class="inp" v-model="circle.slogan" type="text" maxlength="20" value="" placeholder="例如 以球交友" /><icon v-if="sureSlogan" type="warn"></icon>
				</view>
			</view>
			<view class="it item title">
				<view class="left">位置</view>
				<view class="item-right">
					<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
					 @onCancel="onCancel" @onConfirm="onConfirm">
					</mpvue-city-picker>
					<view class="add-box">
						<input class="inp" type="text" maxlength="20" placeholder="请选择" v-model="circle.address" @click="showMulLinkageThreePicker" disabled="true"/><icon v-if="sureAddress" type="warn"></icon>
					</view>
				</view>
			</view>
			<button class="publish" :disabled="surePubl" @tap="publish">确认发布</button>
		</view>
	</view>
</template>

<script>
	
	import mpvueCityPicker from '../../../../components/mpvue-citypicker/mpvueCityPicker.vue';
	
	export default {
		data() {
			return {
				userInfo: {},
				imgs: [],
				circle: {title: '', slogan: '', address: '', pic: '', createUser: '',type: 0},
			    cityPickerValueDefault: [0, 0, 1],
			    themeColor: '#007AFF',
				typeArr: [],
				typeStr: ''
			}
		},
		onLoad(option) {
			this.userInfo = this.getGlobalUser("globalUser");
			this.getImages();
			this.circle.type = option.type;
		},
		computed: {
			sureTitle(){
				if (this.circle.title == null || this.circle.title == '') {
					return true;
				}else {
					return false;
				}
			},
			sureSlogan(){
				if (this.circle.slogan == null || this.circle.slogan == '') {
					return true;
				}else {
					return false;
				}
			},
			sureAddress(){
				if (this.circle.address == null || this.circle.address == '') {
					return true;
				}else {
					return false;
				}
			},
			surePubl(){
				if(this.circle.slogan == null || this.circle.slogan == '' ||
					this.circle.slogan == null || this.circle.slogan == '' ||
					this.circle.address == null || this.circle.address == ''){
					return true;
				}
				return false;
			}
		},
		methods: {
			publish(){
				var me = this;
				this.circle.createUser = this.userInfo.id;
				this.$apis.saveCircle(this.circle).then((res) => {
					uni.switchTab({
						url: '../../main/main'
					});
				});
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show();
			},
			modifyInfo(title, info){
				this.promptTitle = title;
				this.infoType = info;
				this.showPrompt();
			},
			onCancel(e) {
				console.log(e);
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e);
				this.circle.address = e.label;
			},
			chooseImg(e){
				for (var i = 0; i < this.imgs.length; i++) {
					this.imgs[i].classCon = 'img';
					if(this.imgs[i].id == e){
						this.imgs[i].classCon = 'img-choose';
					}
				}
				this.circle.pic = e;
			},
			getImages(){
				let result = this.$apis.getDictByType({type: 4, parentId: 6});
				result.then((res) => {
					this.imgs = res;
					for (var i = 0; i < this.imgs.length; i++) {
						this.imgs[i].classCon = 'img';
					}
					this.imgs[0].classCon = 'img-choose';
					this.circle.pic = this.imgs[0].id;
				});
			}
		},
		components: {
			mpvueCityPicker
		}
	}
</script>

<style>
	@import url("addCircle.css");
</style>
